import type { MenuDataItem } from '@ant-design/pro-layout';
import { getMenuData, getPageTitle } from '@ant-design/pro-layout'; // DefaultFooter
// import { Image } from 'antd'; // DefaultFooter
import { Helmet, HelmetProvider } from 'react-helmet-async';
import type { ConnectProps } from 'umi';
import { Link, useIntl, connect, history } from 'umi'; // FormattedMessage
import moment from 'moment';
import React, { useState } from 'react';
import type { ConnectState } from '@/models/connect';
import logo from '../../public/favicon.png';
import IconsCompany from '../../public/icons/company.png';
import Icons360 from '../../public/icons/360.png';
import IconsFirefox from '../../public/icons/firefox.png';
import IconsGoogle from '../../public/icons/google.png';
import IconsIE from '../../public/icons/ie.png';
import IconsQQ from '../../public/icons/qq.png';
import IconsSG from '../../public/icons/sg.png';
import IconsHome from '../../public/icons/home.png';
import IconsDown from '../../public/icons/down.png';
import IconsWarn from '../../public/icons/warn.png';
import IconsHelp from '../../public/icons/help.png';
import IconsUserHead from '../../public/icons/user-head.png';
import IconsLogout from '../../public/icons/logout.png';
import jiemianyangshi from '../../public/icons/jiemianyangshi.png';
import styles from './MainLayout.less';
import { Layout } from 'antd';

const { Header, Footer, Content } = Layout;

moment.locale('zh-cn');
export type MainLayoutProps = {
  breadcrumbNameMap: Record<string, MenuDataItem>;
} & Partial<ConnectProps>;

const MainLayout: React.FC<MainLayoutProps> = (props) => {
  const {
    route = {
      routes: [],
    },
    children,
    location = {
      pathname: '',
    },
  } = props;
  const { routes = [] } = route;
  const { formatMessage } = useIntl();
  const { breadcrumb } = getMenuData(routes);
  const title = getPageTitle({
    pathname: location.pathname,
    formatMessage,
    breadcrumb,
    ...props,
  });

  console.log('MainLayout---title:', title);
  console.log('MainLayout---props:', props);
  // console.log("MainLayout---props:children:", props.children)

  const [menuStyle, setSwitchMenuStyle] = useState<number>(1);
  // setSwitchMenuStyle(1);
  const handleSwitchStyle = () => {
    let num = menuStyle;
    if (num === 4) {
      num = 1;
    } else {
      num += 1;
    }
    setSwitchMenuStyle(num);
    console.log('====>', menuStyle);
    return num;
  };

  return (
    <HelmetProvider>
      <Helmet>
        <title>科研管理系统</title>
        <meta name="description" content={title} />
      </Helmet>

      <Layout className={styles.container}>
        <Header className={styles.content}>
          <div className={styles.top}>
            <div className={styles.header}>
              <Link to="/">
                <img alt="logo" className={styles.logo} src={logo} />
              </Link>
              <div className={styles.header_hospital}>
                <div className={styles.header_hospital_name}>上海市人民医院</div>
                <div className={styles.header_hospital_en}>SHANG HAI GENERAL HOSPITAL</div>
              </div>
              <span className={styles.title}>科研管理系统</span>
              <div className={styles.header_space}></div>
              <div className={styles.header_navigation}>
                <div className={styles.header_date}>
                  {moment().format('YYYY年MM月DD日 HH:mm:ss dddd')}
                </div>

                <Link to="/">
                  <img className={styles.icon} alt="logo" src={IconsHome} />
                </Link>
                <Link to="/">
                  <img className={styles.icon} alt="logo" src={IconsDown} />
                </Link>
                <Link to="/">
                  <img className={styles.icon} alt="logo" src={IconsWarn} />
                </Link>
                <Link to="/">
                  <img className={styles.icon} alt="logo" src={IconsHelp} />
                </Link>
                <img
                  onClick={() => {
                    // handleSwitchStyle();
                    history.push(`/main/home4?style=${handleSwitchStyle()}`);
                  }}
                  className={styles.icon}
                  alt="logo"
                  src={jiemianyangshi}
                />
                <Link to="/">
                  <img className={styles.icon} alt="logo" src={IconsUserHead} />
                </Link>
                <Link to="/user/home">
                  <img className={styles.icon} alt="logo" src={IconsLogout} />
                </Link>
              </div>
            </div>
          </div>
        </Header>
        <Content className={styles.main_body}>{children}</Content>
        <Footer className={styles.footer}>
          <Link to="/">
            <img className={styles.footer_icons_company} alt="logo" src={IconsCompany} />
          </Link>
          <span className={styles.footer_company_name}>上海润银软件有限公司</span>
          <span className={styles.footer_technical_support}>技术支持</span>
          <div className={styles.footer_space}></div>
          <span className={styles.footer_browser_support}>浏览器支持</span>
          <img className={styles.footer_browser} alt="logo" src={IconsFirefox} />
          <img className={styles.footer_browser} alt="logo" src={Icons360} />
          <img className={styles.footer_browser} alt="logo" src={IconsGoogle} />
          <img className={styles.footer_browser} alt="logo" src={IconsQQ} />
          <img className={styles.footer_browser} alt="logo" src={IconsSG} />
          <img className={styles.footer_browser} alt="logo" src={IconsIE} />
          <span className={styles.footer_browseDescription}>（IE8以上）</span>
        </Footer>
      </Layout>
    </HelmetProvider>
  );
};

export default connect(({ settings }: ConnectState) => ({ ...settings }))(MainLayout);
